<template>
    <view >
    <view class="show-background " v-if="showvehicle">
        <view class="fixed b0 l0 w100b " style="height:80vh;">
            <view class="w100b h100b relative bgfff bsbox ">
                <view class="dsf pt30 jcsb pl30 pr30 ">
                    <u-icon     name="close" size="26" ></u-icon>
                    <view class="fz32 col333 fwb ">{{$root.m0}}</view>
                    <view class="w36 h10 "></view>
                </view>
                <view class="w100b pt10 " style="height:calc(100% - 170rpx - 80rpx);">
                    <scroll-view class="w100b h100b " scrollY="true">
                        <view  class="dsf alc pt30 pl30 pr30 "  v-for="(item,index) in $root.l0" :key="index">
                            <view class="w42 h42 mr40 ">
                                <u-radio-group     size="20" v-model="carradiovalue"  >
                                    <u-radio   class="w100b h100b "  :name="item[$orig].id" ></u-radio>
                                </u-radio-group>
                            </view>
                            <view class="fg1 bsbox pt30 pb30 " style="box-shadow:0 0 20rpx rgba(0, 102, 230, .15);">
                                <view class="dsf alc pl30 pr30 pb30  ">
                                    <view class="w200 h150 over-hidden ">
                                        <image class="w200 " mode="widthFix" :src="item[$orig].icon"></image>
                                    </view>
                                    <view class="pl56 ">
                                        <view class="fz30 fwb col333 ">{{item[$orig].title}}</view>
                                        <view class="pt14 fz26 ">
                                            <text class="col999 ">{{item.m1}}</text>
                                            <text class="col333 pl10 ">{{item[$orig].width+' 米'}}</text>
                                        </view>
                                        <view class="pt14 fz26 ">
                                            <text class="col999 ">{{item.m2}}</text>
                                            <text class="col333 pl10 ">{{item[$orig].height+' 米'}}</text>
                                        </view>
                                        <view class="pt14 fz26 ">
                                            <text class="col999 ">{{item.m3}}</text>
                                            <text class="col333 pl10 ">{{item[$orig].height+' 米'}}</text>
                                        </view>
                                    </view>
                                </view>
                                <view class="pl24 pt24 car-top " v-if="item.g0">
                                    <view class="dsf alc ">
                                        <text class="fz30 col333 ">{{item.m4}}</text>
                                        <text class="fz24 col999 ">{{'（'+item.m5+'）'}}</text>
                                    </view>
                                    <view class="pt24 dsf flex-wrap ">
                                        <view catchtap="__e" :class="['',item2.model?'car-model-active':'car-model']"  v-for="(item,index) in item[$orig].vehicle_info.model" wx:for-index="index2" wx:for-item="item2" :key="index2">{{''+item2.name+''}}</view>
                                    </view>
                                </view>
                            </view>
                        </view>
                    </scroll-view>
                </view>
                <view class="absolute b0 l0 w100b bgfff h160 dsf alc jcsb pl30 pr30 " style="box-shadow:0 -2rpx 10rpx rgba(0, 102, 230, .15);">
                    <view class="dsf alc fwb col333 ">
                        <text class="fz60 pr10 ">{{money}}</text>
                        <text class="fz28 ">{{$root.m6}}</text>
                    </view>
                    <view >
                        <view  class="w200 h102 bdra14 bg2270FC fz32 colfff dsf alc jcc " >{{$root.m7}}</view>
                    </view>
                </view>
            </view>
        </view>
    </view>
</view>

</template>

<script>
	export default {
		data() {
      
    },
		onLoad() {

		},
		onShow() {

		},

		methods: {

		}
	}
</script>

<style scoped lang="scss">
.show-background {
    z-index: 800 !important
}

.car-model-active {
    border: 1px solid #0083fe;
    border-radius: 10upx;
    color: #0083fe
}

.car-model-active,
.car-model {
    align-items: center;
    background-color: #eef2fd;
    display: -webkit-inline-flex;
    display: inline-flex;
    font-size: 24upx;
    height: 48upx;
    justify-content: center;
    margin-right: 24upx;
    margin-top: 10upx;
    padding-left: 10upx;
    padding-right: 10upx
}

.car-model {
    border: 1px solid #e9e9e9;
    border-radius: 10upx;
    color: silver
}

.car-top {
    border-top: 1px solid #e1e1e1
}

.show-background {
    background-color: rgba(0, 0, 0, .3);
    height: 100%;
    left: 0;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 20001
}

.bod-radius {
    background-color: #fff;
    border-radius: 20upx 20upx 0 0
}

.usecartimebody {
    width: 200upx
}

.usecartime {
    font-size: 22upx;
    text-align: center;
    width: 100%
}
</style>